<!--  banner 区域 -->
<template>
  <div class="mall-wrapper">
    <!-- banner 区域 -->
    <section>
      <div class="banner-content">
        <h2>算法试用</h2>
      </div>
    </section>

    <!-- 功能列表区域 -->
    <el-card style="margin: 0 70px">
      <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px; margin-top: 10px; margin-left: 20px">
        抽烟检测
      </div>
      <el-divider></el-divider>

      <!-- 上传区域 -->
      <div style="display: flex; margin: 20px 70px">
        <!-- 图片区域 -->
        <div style="flex: 1">
          <!--          <img class="image-container" :src="uploadImageUrl" v-if="uploadImageUrl !== ''" style="margin-left: 0;" />-->
          <el-empty v-if="parseLoading" :image-size="200" style="height: 100%">
            <template slot="image">
              <i class="el-icon-loading"></i>
            </template>
            <template slot="description"> 解析中... </template>
          </el-empty>
          <el-empty v-else :image-size="200"></el-empty>
        </div>

        <!-- 上传按钮区域 -->
        <div class="upload-button-container">
          <el-upload
              class="upload-demo"
              :on-remove="handleRemove"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :limit="1"
              :action="action"
          >
            <div class="button-group">
              <el-button size="middle" type="primary" style="width: 100%; margin-left: 10px; background-color: #00af84"
              >上传图片
              </el-button>
              <el-button size="middle" type="primary" style="width: 100%; background-color: #00af84"
              >上传视频
              </el-button>
            </div>
          </el-upload>
        </div>
      </div>

      <!-- 解析结果区域 -->

      <div class="parseResult" style="display: flex; margin: 0px 70px; justify-content: space-between">
        <div style="font-size: 12px; margin-bottom: 10px; margin-top: 10px">解析结果</div>
        <a style="font-size: 12px; color: #42b983; text-decoration: underline; cursor: pointer" @click="openModal"
        >历史结果</a
        >
      </div>

      <!-- 解析结果图片区域 -->
      <div
          class="list-content"
          style="display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; margin: 0 55px"
      >
        <div
            class="item"
            v-for="(item, index) in parseResultList"
            :key="index"
            style="background-color: rgba(129, 211, 248, 0.12156862745098); padding: 20px; margin: 10px"
        >
          <div class="image-container" style="position: relative; width: 250px; height: 125px">
            <img :src="item.resultUrl" style="width: 100%; height: 100%" />
            <div
                class="result-box"
                v-for="(position, index) in item.positionInfoList"
                :key="index"
                style="position: absolute; border: 2px solid red; box-sizing: border-box"
                :style="{
                left: (position.x / item.picWidth) * 100 + '%',
                top: (position.y / item.picHeight) * 100 + '%',
                width: (position.w / item.picWidth) * 100 + '%',
                height: (position.h / item.picHeight) * 100 + '%',
              }"
            ></div>
          </div>
          <div style="font-size: 14px; display: flex; justify-content: space-between">
            <div>{{ parseInfo.algorithmName }}</div>
            <div>{{ parseInfo.updateTime }}</div>
          </div>
        </div>
      </div>

      <!-- 注意事项 -->
      <div style="margin-top: 60px; margin-left: 70px; color: red">
        请注意：上传数据与结果数据当天有效，之后自动清除!!!
      </div>

      <!-- 返回按钮 -->
      <div style="text-align: center">
        <el-button type="primary" class="back-button" @click="goBack">返回</el-button>
      </div>
    </el-card>

    <el-dialog title="历史结果" :visible.sync="showModal" width="70%" :before-close="handleClose">
      <div class="list-content" style="display: flex; flex-direction: row; align-items: center; flex-wrap: wrap">
        <div
            class="item"
            v-for="(item, index) in historyParseResult"
            :key="index"
            style="background-color: rgba(129, 211, 248, 0.12156862745098); padding: 20px; margin: 10px"
        >
          <div class="image-container" style="position: relative; width: 250px; height: 125px">
            <img :src="item.resultUrl" style="width: 100%; height: 100%" />
            <div
                class="result-box"
                v-for="(position, index) in item.positionInfoList"
                :key="index"
                style="position: absolute; border: 2px solid red; box-sizing: border-box"
                :style="{
                left: (position.x / item.picWidth) * 100 + '%',
                top: (position.y / item.picHeight) * 100 + '%',
                width: (position.w / item.picWidth) * 100 + '%',
                height: (position.h / item.picHeight) * 100 + '%',
              }"
            ></div>
          </div>
          <div style="font-size: 14px; display: flex; justify-content: space-between">
            <div>{{ parseInfo.algorithmId }}</div>
            <div>{{ item.createTime }}</div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-pagination layout="prev, pager, next" :total="historyParseResult.length"> </el-pagination>
      </span>
    </el-dialog>
    <!-- 子路由出口 -->
    <router-view />
  </div>
</template>

<script>
import {algorithmInfoResultUsingPost, algorithmInfoTrialUsingPost} from '@/api/front/apIsuanfa';

export default {
  name: 'AlgorithmApplyDetail',

  data() {

    return {
      pollId: 0, // 轮询id => trial result
      action: '/api/file/upload',
      // action: `${process.env.VUE_APP_BASE_PATH}/api/file/upload`,
      algorithmId: '',
      mobile: '11111111111',
      currentDate: new Date(),
      showModal: false,
      uploadImageUrl: '',
      parseResultList: [],
      parseInfo: '',
      historyParseResult: [],
      parseLoading: false
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    openModal() {
      this.showModal = true;
    },
    getParseResult() {
      algorithmInfoResultUsingPost({
        body: {
          algorithmId: this.algorithmId,
          mobile: this.mobile,
        }
      }).then(res => {
        if (res.success) {
          //获取最新的一个解析结果
          const lastIndex = res.data.length - 1;
          this.parseResultList = res.data[lastIndex].trialResultList;
          this.parseInfo = res.data[lastIndex];
          //将所有解析结果平铺
          this.historyParseResult = res.data.flatMap(item => {
            return item.trialResultList
          }).filter(item => item !== null);

        }
      })
    },
    /**
     * 资源类型
     * fileType: 1-流，2-视频，3-图片
     */
    handleTrial(fileType, file) {
      algorithmInfoTrialUsingPost({
        body: {
          algorithmId: this.algorithmId,
          mobile: this.mobile,
          fileType: fileType,
          // envName: 'person_1.0.1',
        },
        file: file.raw,

      }).then((res) => {
        if (res.success) {
          this.parseLoading = true
          this.$message.success("上传成功,开始解析...");
          if (fileType !== 3) {
            this.pollId = setInterval(() => {
              this.getParseResult()
            }, 2000)
            return
          }
          setTimeout(() => {
            this.getParseResult()
            this.parseLoading = false
          }, 2000)
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    goBack() {
      this.$router.back();
    },
    handleRemove(file) {
      console.log(file);
    },
    handleExceed() {
      this.$message.warning("请删除多余的文件");
    },
    handleSuccess(res, file) {
      // 删除轮询
      clearInterval(this.pollId)
      const fileType = file.raw.type.split("/")[0] === 'image' ? 3 : 2
      console.log("处理类型为(1-流，2-视频，3-图片):" + fileType)
      if (res.success) {
        this.uploadImageUrl = res.data
        this.handleTrial(fileType, file);
      }
    },
  },
  mounted() {
    this.algorithmId = this.$route.params.id;
    this.getParseResult()
  },
  destroyed(){
    console.log("销毁实例")
    // 删除轮询
    clearInterval(this.pollId)
  }
}
</script>

<style scoped>
/* 页面整体样式 */
.mall-wrapper {
  background-color: #f5f5f5;
  min-height: 200vh;
  padding-bottom: 40px;
  box-sizing: border-box;
  overflow: hidden;
  width: 1460px;
  margin: 0 auto;
  padding: 0;
}

/* banner 样式 */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 20px;
  color: #fff;
  height: 281.25px;
  width: 100%;
}

.banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 90px;
}

.banner-content h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.banner-content p {
  line-height: 1.6;
  margin-bottom: 30px;
}

.image-container {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.upload-demo {
  display: block;
}

.upload-button-container {
  width: 150px;
  display: flex;
  justify-content: flex-end;
  padding-top: 200px;
}

.button-group {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 120px;
  margin-right: 200px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

/* .button {
    padding: 0;
    float: right;
} */

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.banner {
  background-color: #f5f5f5;
  padding: 20px;
}

.back-button {
  margin: 20px 70px;
  background-color: #00af84;
}

.banner-btn {
  padding: 10px 20px;
  background-color: #00af84;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.banner-btn :hover {
  background-color: #009670;
}

.banner-img img {
  width: 300px;
  height: auto;
}

/* 筛选区域样式 */
.filter {
  display: flex;
  align-items: center;
  margin-left: 90px;
  gap: 10px;
  padding: 20px;
}

.search-input,
.filter-select {
  box-sizing: border-box;
  width: 191.88px;
  height: 40px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: rgba(0, 0, 0, 0.5);
}

.search-input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.filter-btn {
  height: 39.6px;
  width: 69.6px;
  padding: 8px 15px;
  background-color: #00af84;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 功能列表样式 */
.feature-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 70px;
  padding: 20px;
  /* margin-left: 90px; */
}

.feature-item {
  width: 255px;
  height: 270px;
  text-align: center;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 0px;
  margin: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.item-content {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding: 0px;
}

/* 标题容器样式 */
.title-container {
  display: flex;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
}

/*图标样式 */
.icon {
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* 图片容器 */
.image-container {
  position: relative;
  width: 70%;
  height: 600px;
  overflow: hidden;
  /* //margin-left: 70px; */
}

/*
/* 悬停时放大图片 */
/* .image-container:hover {
    transform: scale(1.05);
    /* 放大 5% */
/* cursor: pointer; */
/* 改变鼠标样式为手型 */
/* } */

.feature-item img {
  height: 140px;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* 悬停时放大图片 */

/* 类型标签 */
.type-label {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: #4caf50;
  color: white;
  padding: 4px 8px;
  font-size: 12px;
  z-index: 1;
  opacity: 0.8;
  /*类型透明度 */
}

/* 多行文本截断核心样式 */
.desc-truncate {
  margin: 0;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  line-height: 24px;
  max-height: 48px;
  color: #666;
  text-overflow: ellipsis;
  text-align: left;
  font-size: 15px;
  padding-left: 0.5em;
  /* 替代 text-indent */
}

/* 分页样式 */
/* 分页容器 */
/* 分页容器 */
.pagination {
  display: flex;
  justify-content: center;
  padding: 20px;
  margin-top: 20px;
}

.pagination ul {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* 公共按钮样式 */
.pagination li {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

/* 上一页和下一页按钮 */
.pagination-prev,
.pagination-next {
  background-color: #fff;
  color: #666;
  border-color: #ccc;
}

.pagination-prev:hover,
.pagination-next:hover {
  background-color: #f0f0f0;
}

/* 页码按钮 */
.pagination-page {
  background-color: #fff;
  color: #333;
  border-color: #ccc;
}

.pagination-page.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}
</style>
